<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>{$name}</title>
    <style>
        html,
        body,
        div,
        p,
        button,
        span {
            margin: 0;
            padding: 0;
        }

        .wrap {
            text-align: center;
        }

        .title {
            margin: 30px 0;
        }

        .money {
            font-size: 35px;
            font-weight: normal;
        }

        .money span {
            font-size: 14px;
        }

        .btn-wrap .btn {
            background: #20a53a;
            color: #fff;
            width: 80vw;
            border: none;
            line-height: 55px;
            border-radius: 5px;
            margin-top: 50px;
        }

        .btn-wrap .alipay {
            background: #00a1e8;
        }
        #js-alipay {
            visibility: hidden;
        }
        .remark{
            margin: 100px 80px;
            color: #666;
            line-height: 1.8;
            font-size: 16px;
        }
        .images{
            display: flex;
            flex-direction: column;
        }
        .images img{
            margin: 20px;
        }
    </style>
</head>

<body>
<div class="wrap">
    <p class="title">订单金额</p>
    <h3 class="money"><span>￥</span>{$total_amount}</h3>
    <div class="btn-wrap">
        {eq name='$config.wechat_switch' value='1'}
            <button class="btn wechat" onclick="wxpay()">微信</button>
        {/eq}
        {eq name='$config.alipay_switch' value='1'}
            <button class="btn alipay" onclick="getAlipay()">支付宝</button>
        {/eq}
        <div id="js-alipay"></div>

        <div class="remark">
            点击以上按钮没反应可按下面的步骤开启一下浏览器的js功能<br/>
            再返回点击
        </div>
        <div class="images">
            <img src="/style/img/wappay_js_1.jpg" alt="">
            <img src="/style/img/wappay_js_2.jpg" alt="">
            <img src="/style/img/wappay_js_3.jpg" alt="">
        </div>
    </div>
</div>
</body>
</html>
{load href="__JS__jquery.min.js"}
{load href="__LAYUI__css/layui.css"}
{load href="__LAYUI__layui.js"}

<script>
    var order_sn = "{$order_sn}";

    layui.use('layer', function () {
        var layer = layui.layer;
    });

    function getAlipay()
    {
        $.ajax({
            type: 'POST',
            url: "{:url($url.alipay)}",
            data: {order_sn: order_sn},
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    console.log(data)
                    $('#js-alipay').html(data.data.url)
                } else {
                    layer.msg(data.msg, {icon: 0});
                }
            },
            error: function (e) {
                console.log(e)
                layer.msg(e.responseText);
            }
        });
    }

    function wxpay()
    {
        let wxurl = "http://www.nihaozaima.cn";
        // let wxurl = "http://127.0.0.1";
        if (window.location.origin!=wxurl){
            return window.location.href = wxurl + window.location.pathname + window.location.search + '&wxauto=1'
        }
        $.ajax({
            type: 'POST',
            url: "{:url($url.wechat)}",
            data: {order_sn: order_sn},
            dataType: 'json',
            success: function (data) {
                if (data.code === 200) {
                    window.location.href = data.data.mweb_url;
                } else {
                    layer.msg(data.msg, {icon: 0});
                }
            },
            error: function (e) {
                layer.msg(e.responseText);
            }
        });
    }

    {if condition="$wxauto"}
    setTimeout(()=>{
        wxpay()
    }, 100)
    {/if}



</script>